<div class="panel panel-default-custom" ng-controller="EnrollmentController">
    <div class="panel-heading handle bold">
        {{enrollmentWidget.title| translate}}           

        <span class="pull-right widget-link">            
            <a class="small-horizontal-spacing" href ng-click="expandCollapse(enrollmentWidget)">
                <span ng-show="enrollmentWidget.expand"><i class="fa fa-chevron-up" ng-attr-title="{{collapseLabel}}"></i></span>
                <span ng-show="!enrollmentWidget.expand"><i class="fa fa-chevron-down" ng-attr-title="{{expandLabel}}"></i></span>
            </a>
            <a ng-show="userAuthority.canAdministerDashboard || !lockedList[selectedProgram.id]" class="small-horizontal-spacing" href ng-click="removeWidget(enrollmentWidget)" ng-attr-title="{{removeLabel}}"><i class="fa fa-times-circle"></i></a>            
        </span>
    </div>
    <div ng-show="enrollmentWidget.expand" class="panel-body dashboard-widget-container">
        
        <div>
            <!-- operations on selected enrollment begins -->
            <div class="row equal-height-columns" ng-class="{'disable-clicks':selectedOrgUnit.closedStatus}">
                <div class="col-sm-6">             
                    <div class="title small-vertical-spacing">
                        <span ng-if="hasOtherPrograms">
                            {{'selected_program'| translate}}                           
                        </span>
                        <span ng-if="owningOrgUnitName">
                            <div style="font-size: 10pt">{{'owned_by' | translate}} {{owningOrgUnitName}}</div>
                        </span>
                        <span class="nav-pills" ng-show="selectedProgram && currentEnrollment && currentEnrollment !== selectedEnrollment">
                            | <a href ng-click="loadEnrollmentDetails(currentEnrollment)" ng-attr-title="{{'current'| translate}}"><span ng-class="{true: 'widget-link-active bold', false: 'widget-link'} [showEnrollmentDiv]">{{'current'| translate}}</span></a>
                        </span>
                        <span class="nav-pills" ng-show="selectedProgram && !currentEnrollment && !selectedTei.inactive && selectedProgram.access.data.write">
                            <span ng-show="selectedProgram && currentEnrollment && currentEnrollment !== selectedEnrollment">|</span> <a href ng-click="showNewEnrollment()" ng-attr-title="{{'add_new'| translate}}"><span ng-class="{true: 'widget-link-active', false: 'widget-link'} [showEnrollmentDiv]">{{'add_new'| translate}}</span></a>
                        </span>
                        <span class="nav-pills" ng-show="hasEnrollmentHistory">
                            <span ng-if="selectedProgram && selectedProgram.access.data.write">|</span> <a href ng-click="showEnrollmentHistory()" ng-attr-title="{{'history'| translate}}"><span ng-class="{true: 'widget-link-active bold', false: 'widget - link'} [showEnrollmentHistoryDiv]">{{'history'| translate}}</span></a>
                        </span>
                    </div>
                    <div class="vertical-spacing">
                        <form name="enrollmentForm" novalidate>
                            <div ng-if="selectedEnrollment.enrollment">                    
                                <table class="dhis2-list-table-striped default-form-table">
                                    <tr>
                                        <td>
                                            {{'enrolling_orgunit' | translate}}
                                        </td>
                                        <td class="absorbing-column">
                                            <input type="text" class="form-control" ng-attr-value={{selectedEnrollment.orgUnitName}} ng-disabled="true"/>
                                        </td>
                                    </tr>
                                    <tr ng-if="selectedProgram.featureType && ['POLYGON','POINT'].includes(selectedProgram.featureType)">
                                        <td>
                                            {{'enrollment_'+selectedProgram.featureType.toLowerCase() | translate}}
                                        </td>
                                        <td class="absorbing-column">
                                            <d2-geometry
                                                d2-object-id="geometry"
                                                d2-object="enrollmentGeometryState"
                                                d2-disabled="selectedOrgUnit.closedStatus || !enrollmentGeometryState.editable"
                                                d2-geometry-type="selectedProgram.featureType"
                                                d2-callback-function="updateEnrollmentGeometry()"
                                                >
                                            </d2-geometry>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {{selectedProgram.enrollmentDateLabel}}
                                        </td>
                                        <td class="absorbing-column" ng-if="!enrollmentDateState.editable">
                                            <input type="text" ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" class="form-control" d2-date ng-model="selectedEnrollment.enrollmentDate" ng-disabled="true"/>
                                        </td>
                                        <td class="absorbing-column" ng-if="enrollmentDateState.editable">
                                            <form name="enrollmentDateForm" novalidate>
                                                <input type="text"
                                                    ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" 
                                                    name="enrollmentDate" 
                                                    class="form-control hideInPrint" 
                                                    d2-date 
                                                    ng-class="getReportDateNotificationClass('enrollmentdate')"
                                                    ng-model="enrollmentDateState.date"
                                                    min-date="enrollmentDateState.minDate"
                                                    max-date="enrollmentDateState.maxDate"
                                                    blur-or-change="updateEnrollmentDate()"
                                                    ng-disabled="selectedOrgUnit.closedStatus"
                                                    ng-required="true"/>
                                            </form>
                                        </td>
                                    </tr>
                                    <tr ng-if="selectedProgram.displayIncidentDate">                    
                                        <td>
                                            {{selectedProgram.incidentDateLabel}}
                                        </td>
                                        <td class="absorbing-column" ng-if="!incidentDateState.editable">
                                            <input type="text" ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" class="form-control" d2-date ng-model="selectedEnrollment.incidentDate" ng-disabled="true"/>
                                        </td>
                                        <td class="absorbing-column" ng-if="incidentDateState.editable">
                                            <ng-form name="incidentDateForm" novalidate>
                                                <input type="text"
                                                    ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" 
                                                    name="enrollmentDate" 
                                                    class="form-control hideInPrint" 
                                                    d2-date 
                                                    ng-class="getReportDateNotificationClass('incidentdate')"
                                                    ng-model="incidentDateState.date"
                                                    min-date="incidentDateState.minDate"
                                                    max-date="incidentDateState.maxDate"
                                                    blur-or-change="updateIncidentDate()"
                                                    ng-disabled="selectedOrgUnit.closedStatus"
                                                    ng-required="true"/>
                                            </form>
                                        </td>
                                    </tr>
                                    <tr ng-if="selectedProgram.captureCoordinates">
                                        <td>
                                            {{'coordinate' | translate}}
                                        </td>
                                        <td>
                                            <d2-map d2-lat-saved="enrollmentLatSaved"
                                                    d2-lng-saved="enrollmentLngSaved"
                                                    d2-object="selectedEnrollment" 
                                                    d2-disabled="!selectedProgram.access.data.write || selectedEnrollment.status !== 'ACTIVE' || selectedOrgUnit.closedStatus || selectedEnrollment.orgUnit != selectedOrgUnit.id"
                                                    d2-function="saveCoordinate(arg1)" 
                                                    d2-coordinate-format="'COORDINATE'"
                                                    d2-function-param-coordinate="LATLNG">
                                            </d2-map>
                                        </td>
                                    </tr>
                                </table>

                                <div class="vertical-spacing">
                                    <button type="button" 
                                            class="btn btn-primary"
                                            ng-if="selectedProgram.access.data.write && selectedEnrollment.status !== 'CANCELLED'"
                                            ng-disabled="!canUseEnrollment() || selectedOrgUnit.closedStatus"
                                            ng-click="completeReopenEnrollment()">
                                        {{selectedEnrollment.status === 'ACTIVE' ? 'complete' : 'reopen' | translate}}
                                    </button>
                                    <button type="button" 
                                            class="btn btn-warning"
                                            ng-if="selectedProgram.access.data.write && selectedEnrollment.status !== 'COMPLETED'"
                                            ng-disabled="!canUseEnrollment() || selectedOrgUnit.closedStatus"
                                            ng-click="activateDeactivateEnrollment()">
                                        {{selectedEnrollment.status === 'CANCELLED' ? 'activate' : 'deactivate' | translate}}
                                    </button>                                                                    
                                    <button type="button"
                                            class="btn"
                                            ng-if="selectedProgram.access.data.write && selectedEnrollment.status === 'ACTIVE'"
                                            ng-attr-title="{{selectedEnrollment.followup ? 'unmark_for_followup' : 'mark_for_followup' | translate}}"
                                            ng-class="{true: 'btn-danger', false: 'btn-default'} [selectedEnrollment.followup]" 
                                            ng-disabled="selectedEnrollment.status !== 'ACTIVE' || selectedTei.inactive || selectedOrgUnit.closedStatus"
                                            ng-click="markForFollowup()">
                                        <i class="fa fa-exclamation-triangle"></i>
                                    </button>                                    
                                    <button type="button" 
                                            class="btn btn-danger pull-right"
                                            ng-disabled="selectedOrgUnit.closedStatus"
                                            ng-if="selectedProgram.access.data.write"
                                            ng-click="deleteEnrollment()">
                                        {{'delete' | translate}}
                                    </button>
                                </div>
                            </div>
                        </form>
                        

                        <!-- various alerts begin -->
                        <div ng-if="selectedProgram && !selectedEnrollment && !showEnrollmentDiv && !hasEnrollmentHistory">
                            <div class="alert alert-warning">{{'not_yet_enrolled_enrollment'| translate}}</div>
                        </div>
                        <div ng-if="selectedProgram && !selectedEnrollment && !showEnrollmentDiv && !showEnrollmentHistoryDiv && hasEnrollmentHistory">
                            <div class="alert alert-warning">{{'no_active_enrollment_exists'| translate}}</div>
                        </div>
                        <div ng-if="!selectedProgram && programExists">
                            <div class="alert alert-danger">{{'please_select_a_program_for_enrollment'| translate}}</div> 
                        </div>
                        <div ng-if="!programExists">
                            <div class="alert alert-danger">{{'no_program_exists_enrollment'| translate}}</div> 
                        </div>
                        <!-- various alerts end -->

                        <!-- operations on historical enrollment begins -->
                        <div ng-if="showEnrollmentHistoryDiv && !selectedEnrollment && historicalEnrollments.length > 0">
                            <table class="table table-striped dhis2-table-hover table-bordered">
                                <tr>
                                    <th>
                                        {{selectedProgram.enrollmentDateLabel}}
                                    </th>
                                    <th ng-if="selectedProgram.displayIncidentDate">
                                        {{selectedProgram.incidentDateLabel}}
                                    </th>
                                    <th>
                                        {{'enrolling_orgunit' | translate}}
                                    </th>
                                </tr>
                                <tr ng-click="loadEnrollmentDetails(en)" ng-repeat="en in historicalEnrollments" ng-attr-title="{{'details'| translate}}">
                                    <td>
                                        {{en.enrollmentDate}}
                                    </td>
                                    <td ng-if="selectedProgram.displayIncidentDate">
                                        {{en.incidentDate}}
                                    </td>
                                    <td>
                                        {{en.orgUnitName}}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- operations on historical enrollment ends -->
                    </div>
                    
                </div>
                
                <div class="col-sm-6 border-left" ng-if="!showEnrollmentDiv && hasOtherPrograms">
                    <div class="title small-vertical-spacing">{{'other_programs'| translate}}</div>
                    <div class="vertical-spacing">
                        <div ng-if="activeEnrollments.length > 0">
                            <table class="table table-striped dhis2-table-hover table-bordered">
                                <tr ng-repeat="activeEnrollment in activeEnrollments">
                                    <td ng-if="selectedProgram && selectedProgram.id !== activeEnrollment.program || !selectedProgram" ng-attr-title="{{'set_as_current'| translate}}" ng-click="changeProgram(activeEnrollment.program)">
                                        {{programNames[activeEnrollment.program].displayName}}
                                    </td>
                                </tr>
                            </table> 
                        </div>
                        <div ng-if="activeEnrollments.length === 0">
                            <div class="alert alert-warning">{{'no_active_enrollments_exist'| translate}}</div>
                        </div>
                    </div>
                                    
                </div>
            </div>        
            <!-- operations on selected enrollment ends -->

            <!-- new enrollment registration form begins -->
            <div ng-if="showEnrollmentDiv" ng-include="'components/registration/registration.html'"></div>
            <!-- new enrollment registration form ends -->
        </div>
        
    </div>
</div>
